import React from 'react';
import { StyleSheet, Text, View,TabBarIOS} from 'react-native';
//推荐跨平台的外部组件：https://github.com/skv-headless/react-native-scrollable-tab-view
export default class TabBarIosDemo extends React.Component {
  constructor(){
    super();
    this.state={
      selectedTabItem:0    // 预设变量，记录当前点击的item  
    }
    
  }
  render() {
    return (
      <View style={styles.container}>
        <TabBarIOS 
        style={{height:49, width: 373}}
        tintColor="green"    // 被选中标签颜色
        barTintColor="black"    // TabBarIOS背景色
        translucent={false}        // TabBarIOS不需要半透明效果
        >
            <TabBarIOS.Item
                systemIcon="bookmarks"  // 系统图标(bookmarks)
                badge="15"
                //renderAsOriginal={true}    // 如果为false，只会显示纯色图片
                //icon={require('image!home')}{{uri:'路径'}}
                //selectedIcon={require('image!baker')} 自定义高亮图标
                title="首页" //（如果设置了系统图标，那么这个属性会被忽略）
                //页面之间的切换其实就是根据 selected 是否为 ture，以此决定是否重新渲染界面，涉及到重新渲染
                onPress={() => {this.setState({selectedTabItem:0})}}
                selected={this.state.selectedTabItem === 0}
            >
            {/*内容*/}
            <View style={styles.content}><Text>内容1</Text></View>
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="contacts"  // 系统图标(contacts)
                onPress={() => {this.setState({selectedTabItem:1})}}
                selected={this.state.selectedTabItem === 1}
            >
            <View  style={styles.content}>
              <Text>内容2</Text>
            </View>
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="downloads"  // 系统图标(downloads)
                onPress={() => {this.setState({selectedTabItem:2})}}
                selected={this.state.selectedTabItem === 2}
            >
            <View  style={styles.content}><Text>内容3</Text></View>
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="favorites"  // 系统图标(favorites)
                onPress={() => {this.setState({selectedTabItem:3})}}
                selected={this.state.selectedTabItem === 3}
            >
            <View  style={styles.content}><Text>内容4</Text></View>
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="history"  // 系统图标(history)
                onPress={() => {this.setState({selectedTabItem:4})}}
                selected={this.state.selectedTabItem === 4}
            >
            <View  style={styles.content}><Text>内容5</Text></View>
            </TabBarIOS.Item>
        </TabBarIOS>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  content:{
    flex:1,
    justifyContent:"center",
    alignItems:"center"
  }
});
